import {
    Card,
    Breadcrumb,
    Form,
    Button,
    Radio,
    Input,
    Upload,
    Space,
    Select,
} from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { Link } from 'react-router-dom'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import './index.scss'
import { useStore } from '@/store'
import { useState } from 'react'
import { observer } from 'mobx-react-lite'
import { http } from '@/utils'
import { useRef } from 'react'
const { Option } = Select

const Publish = () => {
    const { channelStore } = useStore()
    // 存放上传图片的列表
    const [fileList, setFileList] = useState([])
    // 暂存仓库
    const fileListRef = useRef([])

    // 上传成功回调
    const onUploadChange = info => {
        const fileList = info.fileList.map(item => {
            if (item.response) {
                return {
                    url: item.response.data.url
                }
            }
            return item
        })
        setFileList(fileList)
        fileListRef.current = fileList
    }
    const [imgCount, setImgCount] = useState(1)


    // 提交表单数据
    const onFinish = async (values) => {

        // console.log(values)
        const { channel_id, content, title, type } = values;
        const params = {
            channel_id,
            content,
            title,
            type,
            cover: {
                type: type,
                image: fileList.map(item => item.url)
            }
        }
        console.log(params)
        console.log('fileList', fileList)
        await http.post('/mp/articles?draft=false', params)
    }
    // 切换图片模式
    const changeType = (e) => {
        const count = e.target.value
        setImgCount(count)
        if (count === 1) {
            const firstImg = fileListRef.current[0]
            setFileList(!firstImg ? [] : [firstImg])
        } else if (count === 3) {
            setFileList(fileListRef.current)
        }
    }
    return (
        <div className="publish">
            <Card
                title={
                    <Breadcrumb separator=">">
                        <Breadcrumb.Item>
                            <Link to="/home">首页</Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>发布文章</Breadcrumb.Item>
                    </Breadcrumb>
                }
            >
                <Form
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ type: 1 }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="标题"
                        name="title"
                        rules={[{ required: true, message: '请输入文章标题' }]}
                    >
                        <Input placeholder="请输入文章标题" style={{ width: 400 }} />
                    </Form.Item>
                    <Form.Item
                        label="频道"
                        name="channel_id"
                        rules={[{ required: true, message: '请选择文章频道' }]}
                    >
                        <Select placeholder="请选择文章频道" style={{ width: 400 }}>
                            {channelStore.channelList.map(channel => <Option key={channel.id}>{channel.name}</Option>)}
                        </Select>
                    </Form.Item>

                    <Form.Item label="封面">
                        <Form.Item name="type">
                            <Radio.Group onChange={changeType}>
                                <Radio value={1}>单图</Radio>
                                <Radio value={3}>三图</Radio>
                                <Radio value={0}>无图</Radio>
                            </Radio.Group>
                        </Form.Item>
                        {imgCount > 0 && <Upload
                            name="image"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList
                            action="http://geek.itheima.net/v1_0/upload"
                            fileList={fileList}
                            onChange={onUploadChange}
                            multiple={imgCount > 1}
                            maxCount={imgCount}
                        >
                            <div style={{ marginTop: 8 }}>
                                <PlusOutlined />
                            </div>
                        </Upload>}

                    </Form.Item>
                    <Form.Item
                        label="内容"
                        name="content"
                        rules={[{ required: true, message: '请输入文章内容' }]}
                    ><ReactQuill
                            className="publish-quill"
                            theme="snow"
                            placeholder="请输入文章内容"
                        /></Form.Item>

                    <Form.Item wrapperCol={{ offset: 4 }}>
                        <Space>
                            <Button size="large" type="primary" htmlType="submit">
                                发布文章
                            </Button>
                        </Space>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    )
}

export default observer(Publish)